<template>
	<view class="currentCom">
		<view class="item" v-for="(item,index) in itemList" :key='index' @click="itemClick(index)"
			:style="{backgroundColor:itemColor,
					color}">
			<view class="wrapper">
				<view class="left">
					<view v-if="item.icon">
						<image :src="item.icon"></image>
					</view>
					<view>{{item.name}}</view>
				</view>
				<view class="right-arrow"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "rightArrowListItem",
		props: {
			itemList: {
				type: Array,
				default () {
					return []
				}
			},
			itemColor: {
				type: String,
				default: "#fff"
			},
			color: {
				type: String,
				default: "#fff"
			},
		},
		data() {
			return {

			};
		},
		methods:{
			itemClick(index){
				this.$emit('click',index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 30rpx;
	}

	.left {
		display: flex;
		align-items: center;
		image{
			height: 60rpx;
			width: 60rpx;
			border: 1px solid;
		}
	}

	.item {
		margin: 15rpx 0;
		padding: 20rpx 0;
		font-size: 30rpx;
		background-color: #FFFFFF;

		.right-arrow {
			width: 20rpx;
			height: 20rpx;
			border-top: 2px solid;
			border-right: 2px solid;
			transform: rotateZ(45deg);
		}
	}
</style>
